<template>
  <div>
    <el-select v-model="rankGoodsId" placeholder="请选择" @change="change">
      <el-option
        v-for="item in rows"
        :key="item.id"
        :label="'等级'+item.rank"
        :value="item.id"
      />
    </el-select>
  </div>
</template>

<script>
import { getGoodsRankList } from '@/api/goods'

export default {
  components: {},
  props: {
    rankId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      rankGoodsId: null,
      rows: []
    }
  },
  watch: {
    rankId(v) {
      this.rankGoodsId = this.rankId
    }
  },
  created() {
    this.getGoodsRankList()
  },
  methods: {
    async getGoodsRankList(params) {
      const { data: { rows }} = await getGoodsRankList()
      this.rows = rows
      console.log(rows)
    },
    change(v) {
      const selected = this.rows.filter(item => { return item.id === v })[0]
      this.$emit('change', v, selected)
      console.log(this.rows)
    }
  }
}

</script>

<style>
</style>
